<template>
	<view>
		<block v-if="!isSwiper">
			<u-grid :col="col" :border="false" align="left">
				<u-grid-item v-for="(item, index) in gridArr" :key="index"  @click="gridClick(item)" :bg-color="gridBgColor">
					<u-badge :count="item.tipDesc" style="z-index: 1;" size="mini" :offset="[15, -5]" :bgColor="item.tipColor" v-if="item.tipDesc"></u-badge>
					<image :src="item.icon" mode="" style="width: 110rpx;height: 110rpx;"></image>
					<view v-text="item.name" class="grid-text"></view>
				</u-grid-item>
			</u-grid>
		</block>
		<block v-else>
			<swiper class="swiper" @change="change">
				<swiper-item v-for="(item,index) in gridArr" :key="index" style="width: 100%;">
					<u-grid :col="col" @click="click" hover-class="hover-class" :border="false">
						<u-grid-item v-for="(obj, idx) in gridArr[index]" :key="idx"  :bg-color="gridBgColor" @click="gridClick(obj)">
							<u-badge :count="obj.tipDesc" style="z-index: 1;" size="mini" :offset="[15, -5]" :bgColor="obj.tipColor" v-if="obj.tipDesc"></u-badge>
							<image :src="obj.icon" mode="" style="width: 110rpx;height: 110rpx;"></image>
							<view v-text="obj.name" class="grid-text"></view>
						</u-grid-item>
					</u-grid>
				</swiper-item>
			</swiper>
			<view class="indicator-dots">
				<view class="indicator-dots-item" :class="[gridCurrent == index ? 'indicator-dots-active' : '']" v-for="(item,index) in gridArr"
				 :key="index"></view>
			</view>
		</block>
	</view>
</template>


<script>
	export default {
		name: 'zy-grid',
		props: {
			col: {
				//每行显示格子数，支持每行3个或4个(默认为3)
				type: Number,
				value: 5
			},
			gridList: {
				type: Array,
				value: []
			}
		},
		data() {
			return {
				// customStyle: {
				// 	padding: '15rpx 0'
				// },
				gridCurrent: 0,
				gridArr: [],
				gridBgColor: '#f7f7f7',
				// gridBgColor: '#FFFFFF',
				isSwiper: false
			};
		},
		watch: {
			gridList() {
				let rowNum = this.col * 2;
				if (this.gridList.length > rowNum) {
					this.isSwiper = true;
					let pages = 1;
					let consts = parseInt(this.gridList.length / rowNum)
					let yushu = parseInt(this.gridList.length % rowNum)
					if (yushu > 0) {
						pages = consts + 1
					}
					let itemList = [];
					let item = [];
					for (var i = 0; i < pages; i++) {
						item = [];
						if (rowNum * (i + 1) > this.gridList.length) {
							for (var j = i * rowNum; j < this.gridList.length; j++) {
								item.push(this.gridList[j])
							}
							itemList.push(item)
						} else {
							for (var j = i * rowNum; j < rowNum * (i + 1); j++) {
								item.push(this.gridList[j])
							}
							itemList.push(item)
						}

					}
					this.gridArr = itemList;
				} else {
					this.gridArr = this.gridList;
					this.isSwiper = false;
				}

			}
		},
		methods: {
			change(e) {
				this.gridCurrent = e.detail.current;
			},
			gridClick(item) {
				uni.navigateTo({
					url: item.linkUrl
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.badge-icon {
		position: absolute;
		top: 14rpx;
		right: 40rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.grid-text {
		font-size: 22rpx;
		// margin-top: 1rpx;
		color: #555;
	}

	.swiper {
		height: 360rpx;
	}
	.indicator-dots {
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.indicator-dots-item {
		background-color: $u-tips-color;
		height: 6rpx;
		width: 36rpx;
		border-radius: 20rpx;
		margin: 0 3rpx;
	}

	.indicator-dots-active {
		background-color: $lxk-theme-color;
	}
</style>
